// Copyright (c) [2021] [daifang]
// [Dcomponent] is licensed under Mulan PSL v2.
// You can use this software according to the terms and conditions of the Mulan PSL v2.
// You may obtain a copy of Mulan PSL v2 at:
//          http://license.coscl.org.cn/MulanPSL2
// THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
// EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
// MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
// See the Mulan PSL v2 for more details.
import './index.less'
import {useEffect, useState, useRef} from 'react'
import { func, object } from 'prop-types'
import {throttle} from '../util/Utils'

export default function List(props) {
    let { onBottom, children, style } = props  // 父组件传值
    let [height,setHeight] = useState(0)  // 初始高
    let list = useRef(null)  // 获取dom
    let [load, setLoad] = useState(false) // 加载状态
    let [isUnMount, setUnMount] = useState(false) // unMount
    useEffect(() => {
        let effect = async ()=>{
            // console.log(list.current)
            list.current.onscroll = throttle(()=>{
                eventFn(list.current)
            }, 300)
            // 判断是否继续请求
            let {scrollHeight, clientHeight} = list.current
            if((scrollHeight === clientHeight) && !load && !isUnMount){
                await setLoad(true)
                if(onBottom){
                    await onBottom()
                    // console.log(list.current)
                    if(!isUnMount)
                        await setLoad(false)
                } 
            }
        }
        effect()
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [onBottom, isUnMount])
    useEffect(() => {
        // console.log('高度改变')
        list.current.onscroll = throttle(()=>{
            eventFn(list.current)
        }, 300)
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [height])
    useEffect(() => {
        // didMount
        return () => {
        // unMount
            setUnMount(true)
        }
    }, [])

    // 事件
function eventFn(event){
    if(isBottom(event)){
        if(onBottom)
            onBottom()
    }
}
function isBottom(e) {
    // 判断滑动到底部
    const { clientHeight, scrollHeight, scrollTop } = e
    const isBottom = Number(scrollTop) + Number(clientHeight) >= Number(scrollHeight) - 50
    // console.log(isBottom)
    if (isBottom) {
      // 到底
      console.log(height, scrollHeight)
      if (height === scrollHeight) {
        console.log('到底但是不加载')
        return false
      }
      // 加载
    //   console.log('xxxxxxxxxxxxxxxxx')
    //   console.log(scrollHeight)
      setHeight(scrollHeight)
    //   console.log(height)
    //   console.log('xxxxxxxxxxxxxxxxx')
    //   console.log('到底并加载')
      return true
    }
    return false
}
    return(
        <div className="d-list" ref={list} style={{...style}}>
            {children}
        </div>
    )
}

List.propTypes = {
    onBottom:func,
    style:object
}

